<template>
    <div class="outer-wrap">
      <el-container>
        <el-aside width="200px">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-vertical"
            @select="handleSelect"
            background-color="#1f2432"
            text-color="#b3b3b3"
            active-text-color="#45a1ff">
            <label v-for="item in menuName" :key="item.id">
              <el-menu-item :index=item.id.toString()>
                <span slot="title">{{ item.deviceName }}</span>
              </el-menu-item>
            </label>
          </el-menu>
        </el-aside>
        <el-main>
          <div class="row-wrap one-row">
            <UpShowInfo ref="UpShowInfoRef" :dataInfo="towerCraneInfo" />
          </div>
          <div class="row-wrap two-row">
            <MiddleShowInfo ref="MiddleShowInfoRef" :dataInfo="towerCraneInfo" />
          </div>
          <div class="row-wrap three-row">
            <NextShowInfo ref="NextShowInfoRef" :dataInfo="craneInfo" />
          </div>
        </el-main>
      </el-container>
    </div>
</template>

<script>
  import UpShowInfo from "./module/UpShowInfo";
  import MiddleShowInfo from "./module/MiddleShowInfo";
  import NextShowInfo from "./module/NextShowInfo";
  import httpInterface from "../../../util/httpInterface";

  export default {
    name: "TowerCraneInfo",
    components: {
      UpShowInfo, MiddleShowInfo, NextShowInfo
    },
    data() {
      return {
        activeIndex: '',
        menuName: [],
        towerCraneInfo: null,
        craneInfo: null
      }
    },

    methods: {
      getTowerCraneInfo() {
        let _this = this;
        let params = {
          page: 1,
          size: 100
        };
        httpInterface.requestGet(this, httpInterface.URL_FIND_PAGE, params, (res) => {
          let data = res.data;
          if (data.success) {
            let rows = data.other.rows;
            _this.activeIndex = rows[0].id.toString();
            _this.menuName = rows;
            _this.handleSelect(_this.activeIndex);
          } else {
            _this.errorMessage('数据加载失败！');
          }
        }, (err) => {
          _this.errorMessage('数据加载失败！');
        })
      },

      handleSelect(id) {
        let _this = this;
        let params = {
          craneId: id
        };
        httpInterface.requestGet(this, httpInterface.URL_DATA_DISPLAY, params, (res) => {
          let data = res.data;
          if (data.success) {
            _this.towerCraneInfo = data.other;
            _this.craneInfo = data.other.craneInfo;
            _this.$refs.NextShowInfoRef.renderPercentInfo(_this.craneInfo);
          } else {
            _this.errorMessage('数据加载失败！');
          }
        }, (err) => {
          _this.errorMessage("数据加载失败！");
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .outer-wrap,
  .el-container{
    width: 100%;
    height: 100%;
  }

  .el-aside {
    background-color: #1f2432;
    color: #333;
  }

  .el-main {
    background-color: #12151f;
    color: #333;
    height: 100%;
  }

  .row-wrap{
    margin-bottom: 20px;

    &:last-child{
      margin: 0;
    }

    &.one-row,
    &.three-row{
      height: 20%;
    }

    &.two-row{
      height: calc(60% - 40px);
    }
  }

  .el-menu-vertical >>> .el-menu-item:hover:not(.is-active){
    background-color: #323240 !important;
    color: #e3e3e3 !important;
  }

  .el-menu-vertical >>> .el-menu-item.is-active:hover{
    background-color: #323240 !important;
  }

  .el-menu-vertical{
    border-right: 0;
  }
</style>
